import type { Module } from 'vuex'
import projectSetting from '@/settings/projectSetting'
import type { IAppState } from './types'
import type { IRootState } from '../types'
import { MenuTypeEnum } from '@/settings/types'
import sysCache from '@/utils/cache'

const app: Module<IAppState, IRootState> = {
  namespaced: true,
  state() {
    return {
      // 系统导航菜单配置
      menuSetting: {
        // 菜单是否折叠
        collapsed:
          (!!sysCache.localCache.getCache('APP_menuCollapsed') as boolean) ||
          projectSetting.MENU.collapsed,
        // 菜单布局模式
        layoutType: sysCache.localCache.getCache('APP_layoutType') || projectSetting.MENU.layoutType
      },
      // 系统顶栏主题色
      layoutHeaderThemeColor:
        sysCache.localCache.getCache('LAYOUT_HEADER_THEMECOLOR') ||
        projectSetting.LAYOUT_HEADER_THEMECOLOR,
      // 系统菜单主题色
      layoutMenuThemeColor:
        sysCache.localCache.getCache('LAYOUT_MENU_THEMECOLOR') ||
        projectSetting.LAYOUT_MENU_THEMECOLOR,
      // 系统是否显示页脚
      showFooter: sysCache.localCache.getCache('LAYOUT_SHOWFOOTER') || projectSetting.showFooter
    }
  },
  getters: {
    menuItemActiveBgColor(state) {
      let color = ''
      if (state.menuSetting.layoutType === MenuTypeEnum.TOP_MENU) {
        color = document.documentElement.style.getPropertyValue('--el-color-primary-light-9')
      } else {
        color = document.documentElement.style.getPropertyValue('--el-color-primary')
      }
      return color
    }
  },
  mutations: {
    // 设置菜单折叠状态
    setMenuCollapsed(state) {
      state.menuSetting.collapsed = !state.menuSetting.collapsed
      sysCache.localCache.setCache('APP_menuCollapsed', state.menuSetting.collapsed)
    },
    // 设置菜单布局模式
    setLayoutType(state, type: MenuTypeEnum) {
      state.menuSetting.layoutType = type
      sysCache.localCache.setCache('APP_layoutType', type)
    },
    // 设置系统顶栏主题色
    setLayoutHeaderThemeColor(state, color) {
      state.layoutHeaderThemeColor = color
      sysCache.localCache.setCache('LAYOUT_HEADER_THEMECOLOR', color)
    },
    // 设置系统菜单主题色
    setLayoutMenuThemeColor(state, color) {
      state.layoutMenuThemeColor = color
      sysCache.localCache.setCache('LAYOUT_MENU_THEMECOLOR', color)
    },
    // 设置系统是否显示页脚
    setShowFooter(state, flag) {
      state.showFooter = flag
      sysCache.localCache.setCache('LAYOUT_SHOWFOOTER', flag)
    }
  },
  actions: {}
}

export default app
